<template>
	<view
		v-if="type === 'column'"
		class="tui-loading tui-loading__box"
		:class="{ 'tui-loading__fixed': fixed }"
		:style="{ backgroundColor: backgroundColor, color: color, position: fixed ? 'fixed' : 'static' }"
	>
		<image class="tui-loading__ani" :src="src"></image>
		<view class="tui-loading__text">{{ text }}</view>
	</view>

	<view v-else class="tui-loading tui-loading__row" :class="{ 'tui-loading__fixed': fixed }" :style="{ position: fixed ? 'fixed' : 'static' }">
		<image class="tui-loading-row__ani" :src="rowsrc"></image>
		<view class="tui-loading__text">{{ text }}</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits([])

const props = defineProps({
	//column or row
	type: {
		type: String,
		default: 'column'
	},
	text: {
		type: String,
		default: '加载中'
	},
	//type=column时生效
	color: {
		type: String,
		default: '#fff'
	},
	//type=column时生效
	backgroundColor: {
		type: String,
		default: 'rgba(0, 0, 0, 0.6)'
	},
	//type=column时生效
	src: {
		type: String,
		default:
			''
	},
	//type=row时生效
	rowsrc: {
		type: String,
		default:
			''
	},
	fixed: {
		type: Boolean,
		default: true
	}
})
</script>

<style lang="scss" scoped>
.tui-loading {
	display: flex;
	align-items: center;
	justify-content: center;
}
.tui-loading__fixed {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
}
.tui-loading__box {
	min-width: 200rpx;
	min-height: 200rpx;
	max-width: 500rpx;
	flex-direction: column;
	border-radius: 10rpx;
}
.tui-loading__ani {
	width: 64rpx;
	height: 64rpx;
	margin: 0 6px;
	animation: rotate 0.9s linear infinite;
	margin-bottom: 30rpx;
}

.tui-loading__row {
	width: 100%;
	height: 36rpx;
	color: #888;
}

.tui-loading-row__ani {
	width: 36rpx;
	height: 36rpx;
	display: block;
	border-radius: 50%;
	animation: rotate 0.9s linear infinite;
	margin-right: 20rpx;
}

.tui-loading__text {
	font-size: 26rpx;
	line-height: 26rpx;
	text-align: center;
}

@-webkit-keyframes rotate {
	from {
		transform: rotatez(0deg);
	}
	to {
		transform: rotatez(360deg);
	}
}
@keyframes rotate {
	from {
		transform: rotatez(0deg);
	}
	to {
		transform: rotatez(360deg);
	}
}
</style>
